import './index.scss'
import { NavLink } from 'react-router-dom'
import { useCallback, useEffect, useRef, useState } from 'react'
import { throttle } from '@/utils'
import { SettingOutlined } from '@ant-design/icons'
import { Drawer, Radio } from 'antd'
import Profile from '../Profile'

const menuList = [
  {
    title: '首页',
    url: '/',
  },
  {
    title: '声优',
    url: '/dubber',
  },
  {
    title: '番剧',
    url: '/anime',
  },
]

let hide = false
let scrollTop = 0

const switchToShow = (header, newScrollTop) => {
  scrollTop = newScrollTop
  if (!hide) return
  header.classList.remove('hide')
  hide = false
}

const switchToHide = (header, newScrollTop) => {
  scrollTop = newScrollTop
  if (hide) return
  header.classList.add('hide')
  hide = true
}

const scrollHandlerWithThrottle = throttle((header) => {
  const newScrollTop = document.documentElement.scrollTop
  if (newScrollTop <= 200 || scrollTop <= 200) {
    switchToShow(header, newScrollTop)
  } else if (newScrollTop < scrollTop && scrollTop - newScrollTop >= 50) {
    switchToShow(header, newScrollTop)
  } else if (newScrollTop > scrollTop && newScrollTop - scrollTop >= 50) {
    switchToHide(header, newScrollTop)
  }
}, 100)

const Header = ({ theme, handleSwitchTheme }) => {
  const ref = useRef(null)
  const [isMobile, setIsMobile] = useState(false)
  const [open, setOpen] = useState(false)

  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }

  const scrollHandler = useCallback(() => {
    if (!ref.current) return
    scrollHandlerWithThrottle(ref.current)
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', scrollHandler)
    const handleResize = () => {
      // 根据窗口宽度判断是否为移动设备（这里设置边界值为768像素）
      setIsMobile(window.innerWidth < 768)
    }

    handleResize() // 页面加载时先执行一次
    window.addEventListener('resize', handleResize) // 监听窗口大小变化
    return () => {
      document.removeEventListener('scroll', scrollHandler)
      window.removeEventListener('resize', handleResize) // 组件卸载时移除监听
    }
  }, [scrollHandler])

  // 查询本地缓存中是否存在用户信息
  const hasUser = localStorage.getItem('user')

  return (
    <div className="nav-header" ref={ref}>
      <div className="container">
        <div className="wrapper">
          <div className="logo">椰羊动漫</div>
          <div className="menu">
            {menuList.map((item, index) => {
              // 检查用户信息是否存在
              // if (item.title === '番剧' && !hasUser) {
              //   return null // 如果没有用户登录，则不显示番剧菜单项
              // }
              return (
                <NavLink
                  key={index}
                  to={item.url}
                  draggable={false}
                  className={({ isActive }) =>
                    isActive
                      ? 'myActive'
                      : theme === 'default'
                      ? 'light'
                      : 'dark'
                  }
                >
                  {item.title}
                </NavLink>
              )
            })}
          </div>
        </div>
        <div>
          <SettingOutlined
            onClick={showDrawer}
            style={{
              color:
                theme === 'light' ? 'rgb(47, 58, 69)' : 'rgb(170, 180, 190)',
              fontSize: 18,
            }}
          />
        </div>
        <Drawer
          closable={false}
          title="设置"
          placement={isMobile ? 'bottom' : 'right'} // 根据是否移动设备来设置 placement 属性
          onClose={onClose}
          open={open}
        >
          <Profile></Profile>
          <p style={{ fontWeight: 'bold' }}>主题切换</p>
          <Radio.Group onChange={handleSwitchTheme} value={theme}>
            <Radio value={'default'}>light</Radio>
            <Radio value={'dark'}>dark</Radio>
          </Radio.Group>
        </Drawer>
      </div>
    </div>
  )
}

export default Header
